<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
    ul {background:#bbaaff; width:300px;}                                   
    li {background:#ffaabb; display:none; float:left; width:300px;}   
    </style>
  <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
  <script type="text/javascript">
    $(function(){
    $("ul").click(function(){                    //点击事件
        $(this).children("li").show().end().siblings().children("li").hide();
        //$(this).children("a").show().end()     被点击的父菜单的子菜单显示，
        //.siblings().children("a").hide();        同辈父菜单下的子菜单隐藏
    });
    });
  </script>
 </HEAD>
 
 <BODY>
  <ul>主页
  <li>主页子内容1(根据你自己的需要更改就可以了)</li>
  <li>主页子内容2(如果觉得难看就丰富一下CSS)</li>
  <li>主页子内容3(当然也可以在显示的时候，修改CSS来提升视觉效果)</li>
  <li>主页子内容4(需要连接，请自己在 li 中加 a)</li>
  </ul>
    <ul>本所简介
  <li>本所简介子内容1</li>
  <li>本所简介子内容2</li>
  <li>本所简介子内容3</li>
  <li>本所简介子内容4</li>
  </ul>
   <ul>新闻公告
  <li>新闻公告子内容1</li>
  <li>新闻公告子内容2</li>
  <li>新闻公告子内容3</li>
  <li>新闻公告子内容4</li>
  </ul>
  <span>用jquery不止是偷懒，虽然他的确方便。主要还是利于 页面内容与行为分离。</span>
 </BODY>
</HTML>